<template>
  <div id="main">
    <div class="no-data-div" v-if="video_info_list.length==0">
      <span>暂无数据</span>
    </div>

    <van-list
      :loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-if="video_info_list.length!=0"
    >

      <div v-if="finished">
        <van-cell @click="toPlayVideo(item.fileFullName)" class="info-item" v-for="(item,index) in video_info_list" :key="index">
          <img class="item-img" :src="getCover(item.fileName)" alt="">
          <div class="info-text-box">
            <div class="file-name flex-item file-info-text">
              <span>
                {{item.fileName}}
              </span>
            </div>
            <div class="file-create-time flex-item file-info-text">
              <span>
                创建时间：{{ new Date(item.createTime).toLocaleString("zh-CN") }}
              </span>
            </div>
            <div class="file-duration flex-item file-info-text">
              <span>
                时长：{{ calculateDuration(item.duration) }}
              </span>
            </div>
            <div class="file-fun flex-item">
              <div class="flex-item">
                <img src="../assets/img/daochu.png" alt="" @click.stop="exportVideo(item.fileFullName)">
              </div>
              <div class="flex-item">
                <img src="../assets/img/shanchu.png" alt="" @click.stop="delVideo(item.fileFullName,item)">
              </div>
              <div class="flex-item">
                <img src="../assets/img/fenxiang.png" alt="" @click.stop="shareVideo(item.fileFullName)">
              </div>
            </div>
            <br>
          </div>
        </van-cell>
      </div>

    </van-list>

    <!-- <div @click="toPlayVideo(item.fileFullName)" class="info-item" v-for="(item,index) in video_info_list" :key="index">
      <img class="item-img" :src="getCover(item.fileName)" alt="">
      <div class="info-text-box">
        <div class="file-name flex-item file-info-text">
          <span>
            {{item.fileName}}
          </span>
        </div>
        <div class="file-create-time flex-item file-info-text">
          <span>
            创建时间：{{ new Date(item.createTime).toLocaleString("zh-CN") }}
          </span>
        </div>
        <div class="file-duration flex-item file-info-text">
          <span>
            时长：{{ calculateDuration(item.duration) }}
          </span>
        </div>
        <div class="file-fun flex-item">
          <div class="flex-item">
            <img src="../assets/img/daochu.png" alt="" @click.stop="exportVideo(item.fileFullName)">
          </div>
          <div class="flex-item">
            <img src="../assets/img/shanchu.png" alt="" @click.stop="delVideo(item.fileFullName,item)">
          </div>
          <div class="flex-item">
            <img src="../assets/img/fenxiang.png" alt="" @click.stop="shareVideo(item.fileFullName)">
          </div>
        </div>
         <br>
      </div>
    </div> -->

  </div>
</template>

<script>
export default {
  name: "FileView",
  data(){
    return {
      video_info_list:[],
      loading:true,
      finished:false
    }
  },
  created() {
  },
  mounted() {
    // 检查权限
    window.android.checkPermission()
    // 加载数据
    this.video_info_list = JSON.parse(window.android.getVideoInfoList())

    // 监听是否渲染完成
    this.$nextTick(()=>{
      this.loading=false
      this.finished=true
    })
  },
  methods:{
    onLoad(){},
    getCover(fileName) {
      let base64=window.android.getCover(fileName)
      return `data:image/jpeg;base64,${base64}`
    },
    toPlayVideo(fileFullName){
      window.android.toPlayVideo(fileFullName)
    },
    exportVideo(fileFullName){
      window.android.exportFile(fileFullName)
    },
    delVideo(fileFullName,item){
      window.android.delFile(fileFullName)
      let index = this.video_info_list.indexOf(item)
      if (index!==-1){
        this.video_info_list.splice(index,1)
      }
    },
    shareVideo(fileFullName){
      window.android.shareFile(fileFullName)
    },
    calculateDuration(dur){
      const date = new Date(dur)
      const h=date.getUTCHours().toString().padStart(2,'0')
      const m=date.getUTCMinutes().toString().padStart(2,'0')
      const s=date.getUTCSeconds().toString().padStart(2,'0')
      return `${h}:${m}:${s}`
    }
  }
}
</script>

<style scoped>
.no-data-div{
  font-size: 2rem;
  height: 50vh;

  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-item{
  flex: 1;
}
.info-item{
  display: flex;
  padding: 0.5rem;

  margin: 0.5rem;
  /* border-bottom: 1px solid gray; */
  /* border: 1px solid gray; */
  background: rgba(224,  240,  240,  0.88235294);
  border-radius: 5px;
}
.item-img{
  width: 3rem;
  flex: 1;

  border-radius: 5px;
}
.info-text-box{
  flex: 3;
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
}
.file-info-text{
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}
.file-fun{
  display: flex;
  align-items: center;
}
.file-fun{
  display: flex;
}
.file-fun img{
  width: 2rem;
}
</style>